<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>农夫山泉维他命水代言</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    button {
        margin: 5px 20px 5px 0;
    }
    </style>
    <script>
    $(function() {
        $("button:contains('柑橘味')").click(function() {
            $("p:first").show();
        });
        $("button:contains('乳酸菌味')").click(function() {
            $("p:first").hide();
        });
        $("button:contains('树莓味')").click(function() {
            $("p:first").toggle();
        });
        $("button:contains('柠檬味')").click(


            function() {
                $("p:first").toggle('fast');
            }


        );
    });
    </script>
</head>

<body>
    <h1>农夫山泉维他命水代言</h1>
    <button>柑橘味</button>
    <button>乳酸菌味</button>
    <button>树莓味</button>
    <button>柠檬味</button>
    <p>每一个口味喝起来都像刷锅水。</p>
    <p>但是有机会抽奖门票，所以我买了。</p>
</body>

</html>